<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->
<div class="y-scrollable">
  <div class="container col-md-12 col-lg-12 col-sm-12">
    <div class="row">
      <div class="col-md-3 col-lg-3 col-sm-3">
        <h5>Simple Statistics</h5>
        <div class="container-fluid">
          <div class="col-md-12 col-lg-12 col-sm-12">
            <input name="vaType" type="radio" [(ngModel)]="vaType" value="2"/>
            <label>Null Count</label>
          </div>
        </div>
        <div class="container-fluid">
          <div class="col-md-12 col-lg-12 col-sm-12">
            <input name="vaType" type="radio" [(ngModel)]="vaType" value="3"/>
            <label>Distinct Count</label>
          </div>
        </div>
        <h5>Summary Statistics</h5>
        <div class="container-fluid">
          <div class="col-md-12 col-lg-12 col-sm-12">
            <input name="vaType" type="radio" [(ngModel)]="vaType" value="4"/>
            <label>Total Count</label>
          </div>
        </div>
        <div class="container-fluid">
          <div class="col-md-12 col-lg-12 col-sm-12">
            <input name="vaType" type="radio" [(ngModel)]="vaType" value="5"/>
            <label>Maximum</label>
          </div>
        </div>
        <div class="container-fluid">
          <div class="col-md-12 col-lg-12 col-sm-12">
            <input name="vaType" type="radio" [(ngModel)]="vaType" value="6"/>
            <label>Minimum</label>
          </div>
        </div>
        <div class="container-fluid">
          <div class="col-md-12 col-lg-12 col-sm-12">
            <input name="vaType" type="radio" [(ngModel)]="vaType" value="7"/>
            <label>Average</label>
          </div>
        </div>
        <div class="container-fluid">
          <div class="col-md-12 col-lg-12 col-sm-12">
            <input name="vaType" type="radio" [(ngModel)]="vaType" value="8" disabled/>
            <label>Median</label>
          </div>
        </div>
        <h5>Advanced Statistics</h5>
        <div class="container-fluid">
          <div class="col-md-12 col-lg-12 col-sm-12">
            <input name="vaType" type="radio" [(ngModel)]="vaType" value="9" disabled/>
            <label>Rule Detection Count</label>
          </div>
        </div>
        <div class="container-fluid">
          <div class="col-md-12 col-lg-12 col-sm-12">
            <input name="vaType" type="radio" [(ngModel)]="vaType" value="10"/>
            <label>Enum Detection Count</label>
          </div>
        </div>
        <div class="container-fluid">
          <div class="col-md-12 col-lg-12 col-sm-12">
            <input name="vaType" type="radio" [(ngModel)]="vaType" value="11" disabled/>
            <label>Regular Expression Match</label>
          </div>
        </div>
      </div>
      <!-- Simple Statistics -->
      <!-- Null Count -->
      <div class="col-md-9 col-lg-9 col-sm-9">
        <div class="container-fluid" *ngIf="vaType==2">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">What is Null Count ?</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  Null is a special marker used to indicate that a data value does not exist.
                </label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">Example</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  Suppose we have the below data table, then the Null Count of "FIRSTNAME" is
                  <kbd style="font-size: 16px">3</kbd>
                </label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <table class="table table-bordered text-center">
                  <thead>
                  <tr class="success">
                    <td>ID</td>
                    <td>FRISTNAME</td>
                    <td>LASTNAME</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>1</td>
                    <td>lei</td>
                    <td>li</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>lei</td>
                    <td>li</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>lei</td>
                    <td>li</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>
                      <abbr title="the value isn't necessary " class="initialism">
                        <mark>null</mark>
                      </abbr>
                    </td>
                    <td>stone</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>lei</td>
                    <td>li</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>lei</td>
                    <td>li</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>
                      <abbr title="the value isn't necessary " class="initialism">
                        <mark>null</mark>
                      </abbr>
                    </td>
                    <td>stone</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>
                      <abbr title="the value isn't necessary " class="initialism">
                        <mark>null</mark>
                      </abbr>
                    </td>
                    <td>zhang</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- Distinct Count -->
        <div class="container-fluid" *ngIf="vaType==3">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">What is Distinct Count ?</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  The Distinct Constraint prevents two records from having identical values in a particular column.
                </label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">Example</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  Suppose we have the below data table which has four attributes-ID, NAME, AGE and FAVOURITE FOOD. Then
                  the Distinct Count is
                  <kbd style="font-size: 16px">2</kbd>
                </label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <table class="table table-bordered text-center">
                  <colgroup>
                    <col span="2" style="background-color:#064225">
                  </colgroup>
                  <thead>
                  <tr class="success">
                    <td>ID</td>
                    <td>NAME</td>
                    <td>AGE</td>
                    <td>FAVOURITE FOOD</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>1</td>
                    <td>Lily</td>
                    <td>20</td>
                    <td>APPLE</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Lucy</td>
                    <td>20</td>
                    <td>APPLE</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>John</td>
                    <td>20</td>
                    <td>APPLE</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>David</td>
                    <td>20</td>
                    <td>APPLE</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>Sam</td>
                    <td>35</td>
                    <td>banana</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>Kaka</td>
                    <td>35</td>
                    <td>banana</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>stone</td>
                    <td>35</td>
                    <td>banana</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>Adison</td>
                    <td>35</td>
                    <td>banana</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- Summary Statistics -->
        <!-- Total Count -->
        <div class="container-fluid" *ngIf="vaType==4">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">What is Total Count ?</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  Total Count is a count of the number of values of the selected column.
                </label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">Example</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                Suppose we have the below data table, then the total count of ID is:
                <kbd style="font-size: 16px">8</kbd>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <table class="table table-bordered text-center">
                  <thead>
                  <tr class="success">
                    <td>ID</td>
                    <td>NAME</td>
                    <td>AGE</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>1</td>
                    <td>lei</td>
                    <td>17</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>lei</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>lei</td>
                    <td>24</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>lei</td>
                    <td>26</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- Maximum -->
        <div class="container-fluid" *ngIf="vaType==5">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">What is Maximum ?</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  Maximum is the biggest value of the selected column.
                </label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">Example</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                Suppose we have the below data table, then the maximum is: 26
                <kbd style="font-size: 16px">26</kbd>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <table class="table table-bordered text-center">
                  <thead>
                  <tr class="success">
                    <td>ID</td>
                    <td>NAME</td>
                    <td>AGE</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>1</td>
                    <td>lei</td>
                    <td>17</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>lei</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>lei</td>
                    <td>24</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>lei</td>
                    <td>
                      <abbr title="the value is the biggest number " class="initialism">
                        <mark>26</mark>
                      </abbr>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- Minimum -->
        <div class="container-fluid" *ngIf="vaType==6">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">What is Minimum ?</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  Minimum is smallest value of the selected column.
                </label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">Example</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                Suppose we have the below data table, then the minimum is:
                <kbd style="font-size: 16px">14</kbd>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <table class="table table-bordered text-center">
                  <thead>
                  <tr class="success">
                    <td>ID</td>
                    <td>NAME</td>
                    <td>AGE</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>1</td>
                    <td>lei</td>
                    <td>17</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>lei</td>
                    <td>
                      <abbr title="the value is the minimum number " class="initialism">
                        <mark>14</mark>
                      </abbr>
                    </td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>lei</td>
                    <td>24</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>lei</td>
                    <td>26</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- Average -->
        <div class="container-fluid" *ngIf="vaType==7">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">What is Average ?</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  Average is the average of the data values.
                </label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">Example</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                Suppose we have the below data table, then the Average of AGE is:
                <kbd style="font-size: 16px">20</kbd>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <table class="table table-bordered text-center">
                  <thead>
                  <tr class="success">
                    <td>ID</td>
                    <td>NAME</td>
                    <td>AGE</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>1</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>lei</td>
                    <td>19</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>lei</td>
                    <td>19</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>lei</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>lei</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>lei</td>
                    <td>22</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>lei</td>
                    <td>22</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- Median -->
        <div class="container-fluid" *ngIf="vaType==8">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">What is Median ?</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  Median is the middle value.
                </label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">Example</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                Suppose we have the below data table, then the median of AGE is:
                <kbd style="font-size: 16px">21</kbd>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <table class="table table-bordered text-center">
                  <thead>
                  <tr class="success">
                    <td>ID</td>
                    <td>NAME</td>
                    <td>AGE</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>1</td>
                    <td>lei</td>
                    <td>17</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>lei</td>
                    <td>19</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>lei</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>lei</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>lei</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>lei</td>
                    <td>22</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>lei</td>
                    <td>22</td>
                  </tr>
                  <tr>
                    <td>9</td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- Rule Detection Count -->
        <div class="container-fluid" *ngIf="vaType==9">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">What is the Rule Detection Count?</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  In theoretical computer science and formal language theory, a regular expression (sometimes called a
                  rational expression) is a sequence of characters that define a search pattern, mainly for use in
                  pattern matching with strings, or string matching, i.e. "find and replace"-like operations.
                </label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">Example</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  There is a series characters of in the column of IDENTIFIER in the following table, and we can use a
                  kind of Regular Expression Matching to search it.
                </label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <table class="table table-bordered text-center">
                  <thead>
                  <tr class="success">
                    <td>IDENTIFIER</td>
                    <td>NAME</td>
                    <td>AGE</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>#1111</td>
                    <td>lei</td>
                    <td>17</td>
                  </tr>
                  <tr>
                    <td>#1245</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>15245</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>87956</td>
                    <td>lei</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>
                      <abbr title="the value is the biggest number " class="initialism">
                        <mark>monkey</mark>
                      </abbr>
                    </td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>
                      <abbr title="the value is the biggest number " class="initialism">
                        <mark>tiger</mark>
                      </abbr>
                    </td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>456</td>
                    <td>lei</td>
                    <td>24</td>
                  </tr>
                  <tr>
                    <td>324</td>
                    <td>lei</td>
                    <td>26</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <p class="text-left">
                  <strong>Suppose Regular Expression is :</strong> ^[A-Za-z]+$
                </p>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <p class="text-left">
                  <strong>The regular expression matching means :</strong> Matches a string consisting of 26 english
                  letters
                </p>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <p class="text-left">
                  The result is:
                  <kbd>2 (MONKEY AND TIGER)</kbd>
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- Enum Detection Count -->
        <div class="container-fluid" *ngIf="vaType==10">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">What is the Enum Detection Count?</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  The Enum Detection Count is a statement of GROUP BY , which often used with aggregate functions
                  (COUNT, MAX, MIN, SUM, AVG) to group the result-set by one or more columns.
                </label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">Example</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  We can use Enum Detection Count to search the lists the number of customers in each country in the
                  following table:
                </label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <table class="table table-bordered text-center">
                  <thead>
                  <tr class="success">
                    <td>CUSTOMERID</td>
                    <td>NAME</td>
                    <td>COUNTRY</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>1</td>
                    <td>lei</td>
                    <td>Germany</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>lei</td>
                    <td>Mexico</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>lei</td>
                    <td>Germany</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>lei</td>
                    <td>Mexico</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>lei</td>
                    <td>China</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>lei</td>
                    <td>China</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>lei</td>
                    <td>UK</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>lei</td>
                    <td>Sweden</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <p class="text-left">
                  <strong>Suppose Enum Expression is :</strong> SELECT COUNT(CUSTORMERID), COUNTRY FROM Customers GROUP
                  BY COUNTRY;
                </p>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <p class="text-left">
                  The result is:
                  <br>
                  <kbd>COUNTRY |COUNT(CUSTOMERID)
                    <br> Germany|2
                    <br> Mexico |2
                    <br> China |2
                    <br> UK |1
                    <br> Sweden |1</kbd>
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- Regular Expression Matching -->
        <div class="container-fluid" *ngIf="vaType==11">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">What is the Regular Expression Match?</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  In theoretical computer science and formal language theory, a regular expression (sometimes called a
                  rational expression) is a sequence of characters that define a search pattern, mainly for use in
                  pattern matching with strings, or string matching, i.e. "find and replace"-like operations.
                </label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <h5 class="text-left" style="margin-left: 0px">Example</h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <label class="text-left">
                  There is a series characters of in the column of IDENTIFIER in the following table, and we can use a
                  kind of Regular Expression Matching to search it.
                </label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <table class="table table-bordered text-center">
                  <thead>
                  <tr class="success">
                    <td>IDENTIFIER</td>
                    <td>NAME</td>
                    <td>AGE</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>#1111</td>
                    <td>lei</td>
                    <td>17</td>
                  </tr>
                  <tr>
                    <td>#1245</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>15245</td>
                    <td>lei</td>
                    <td>18</td>
                  </tr>
                  <tr>
                    <td>87956</td>
                    <td>lei</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>
                      <abbr title="the value is the biggest number " class="initialism">
                        <mark>monkey</mark>
                      </abbr>
                    </td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>
                      <abbr title="the value is the biggest number " class="initialism">
                        <mark>tiger</mark>
                      </abbr>
                    </td>
                    <td>lei</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>456</td>
                    <td>lei</td>
                    <td>24</td>
                  </tr>
                  <tr>
                    <td>324</td>
                    <td>lei</td>
                    <td>26</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <p class="text-left">
                  <strong>Suppose Regular Expression is :</strong> ^[A-Za-z]+$
                </p>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <p class="text-left">
                  <strong>The regular expression matching means :</strong> Matches a string consisting of 26 english
                  letters
                </p>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <p class="text-left">
                  The result is:
                  <kbd>2 (MONKEY AND TIGER)</kbd>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
